<template>
	<div class="front">
		<div class="tree-left bg-white relative">
			<div class="tit">会计年度</div>
			<img src="../../../assets/images/sys.png" class="icon" @click="addYear">
			<div class="wrapper bj">
				<el-scrollbar style="height: 100%;">
					<ul class="list">
						<li v-for="(item, index) in yearArr" :key="index" :class="currentIndex == index ? 'active' : ''" @click="nodeClick(item, index)">{{item}}</li>
					</ul>
				</el-scrollbar>
			</div>
		</div>
		<div class="tree-right bg-white relative">
			<div class="yearLi">
    			<div class="li">
    				<span>会计区间</span>
    				<span v-for="(item, index) in 12" :key="index">{{item}}</span>
    			</div>
    			<div class="li">
    				<span>开始日期</span>
    				<span v-for="(item, index) in 12">{{ (currentYear ? currentYear : yearArr[0]) + '-' + (item < 10 ? '0' + item + '-01' : item + '-01')}}</span>
    			</div>
    		</div>
		</div>
	</div>
</template>
<script>
/*
*  author: 'iissoftware'
*  description: 会计区间组件
*/
export default {
	data() {
		return {
			yearArr: this.$store.state.accountStore.yearArr,
			currentIndex: 0,
			currentYear: null
		}
	},
	methods: {
		nodeClick(row, index) {
			this.currentIndex = index;
			this.currentYear = row;
		},
		addYear() {
			let systemId = this.$store.state.systemId;
			if(!systemId) {
				this.$message({message: '请先添加系统参数', type: 'warning', duration: 1500});
				return false;
			}
			this.$util.openLayerIframe({title: '会计区间-修改', zIndex: 13, width: '500px', height: '310px', url: this.$domain + '/#/basicData/account/updateYear'});
		}
	},
	created() {
		this.$store.dispatch('accountStore/getYearData', this.$url + 'systemParameters/selectSysAccountYear');
	}
}
</script>
<style scoped>
	.tree-left > .icon {cursor: pointer;}
	.tree-left .list > li {
		text-align: center;
		line-height: 26px;
		cursor: pointer;
		list-style-type: none;
	}
	.tree-left .list > li.active,
	.tree-left .list > li:hover {background-color: #f0f7ff;}
	.yearLi {width: 260px;margin: auto;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
    .yearLi > .li {
    	width: 50%;
    	float: left;
    	text-align: center;
    	line-height: 24px;
    	font-size: 14px;
    }
    .yearLi > .li > span {
    	display: block;
    	width: 100%;
    	line-height: 26px;
    	border: 1px solid #666;
    	box-sizing: border-box;
    	margin-left: -1px;
    	margin-top: -1px;
    }
    .wrapper {height: calc(100% - 50px)}
</style>